<template>
    <view class="hot-item" @tap="toDetail">
        <view class="pic">
            <image 
                lazy-load="true"
                class="img"   
                mode="widthFix"
                :src="d.cardPicture?d.cardPicture:'/static/images/blank.png'" />

                
        </view>
         
      
         <view class="hot-bottom" >
                <view class="hot-bottom-title">
                        {{d.cardName}}
                </view>
                <view class="hot-price">
                    <view class="now">￥{{d.cardCurrentprice }}</view>
                    <view class="old">￥{{d.cardOriginalprice }}</view>
                </view>
                <view class="hot-bottom-info">
                        <view class="hot-bottom-user">
                             <image class="hot-bottom-head"  mode="aspectFill"  :src="d.salonSisterphotos?d.salonSisterphotos:'/static/images/blank.png'" />
                                {{d.salonName}}
                        </view>
                       
                </view>
         </view>

    </view>
</template>
<script lang="ts">
import Like from '@/mixins/like'
import {debounce} from '@/common/tool'
import Vue from 'vue'
import { Component, Mixins ,Prop} from 'vue-property-decorator'

let  setDebounce :any= null;  

interface BaseD{
        giveNumber:number;
        giveStatus:number;
        isVideo:number;
        imagesList:any;
        cardId:string|number;
        articleVideo:string;
        id:string;
}

@Component({})
export default  class extends Mixins(Like)  {
    
        giveNumber:number = 0;
        giveStatus:number = 0;
       
        @Prop({type:Object,default:{}}) d!:BaseD;
         

        get newData():any{
                
                //  this.giveNumber = this.d.giveNumber;
                //  this.giveStatus =this.d.giveStatus;
                return this.d;
            }
      
    
        toDetail():any{
            let {cardId} = this.d;
            uni.navigateTo({
                url:`/detailPackages/pages/beautyDetail/index?cid=${cardId}`
            })
        }
        clickLike():void{
                let globalData = getApp().globalData;
                let {userInfo} = globalData;
                let {id} = this.d;

                
      
                if(setDebounce == null){
                          setDebounce = debounce(this,this.like);
                }
              
                
             
                 setDebounce(userInfo,id).then((r:any):void=>{
                            if(r==null)return;
                            let {data:res} = r;
                            if(res.status == 200){

                                this.giveNumber = res.data.sum;
                                this.giveStatus = res.data.status;

                            }

                          
                 })
           

              
        }
    
     beforeMount(){
       

     }    
}
</script>
<style lang="scss">

    .hot{
        &-price{
            display: flex;
            align-items: center;
            margin-bottom: 15rpx;
            .now{
                font-size:30rpx;
                color:#ff0000;
                margin-right: 10rpx;
            }
            .old{
                font-size: 24rpx;
                color:#666;
                text-decoration: line-through;
                font-weight: 200;

            }
        }
        &-item{
            position: relative;
            width: 350rpx;
            margin-bottom: 16rpx;
            
            background: #fff;
            .pic{
                width: 350rpx;
             
                max-height: 600rpx;
                overflow: hidden;
                .img{
                    width: 100%;
                    vertical-align: top;       
                }
               
            }
        }
        &-bottom{
         
          padding: 20rpx ;
          box-sizing: border-box;
          &-title{
              font-size: 28rpx;
              line-height: 1.3;
              text-align: justify;
              margin-bottom:15rpx;
              
          }
            &-info{
                  overflow: hidden;
            }
            &-user{
                   float: left;
                   font-size: 24rpx;
                   line-height: 50rpx;
                   width: 100%;
                   overflow: hidden;
                   text-overflow: ellipsis;
                   white-space: nowrap;
            }
            &-head{
                width: 50rpx;
                height: 50rpx;
                border-radius: 25rpx;
                vertical-align: top;
                margin-right: 10rpx;
            }
            &-like{
                float: right;
                font-size: 24rpx;
                   line-height: 50rpx;
            }
            &-icon{
                    width: 30rpx;
                    height: 28rpx;
                    margin-right: 10rpx;
                    overflow: hidden;
            }
          
        }

      
    }

</style>